<template>
	<view>
		<u-popup v-model="showPop" mode="center" :custom-style="customStyle" :mask-custom-style="maskCustomStyle">
				<view class="flex-col flex-1 popup">
				  <text class="self-center title">提取说明</text>
				  <view class="flex-col self-stretch mt-16-5">
						<scroll-view scroll-y="true" class="popup-content flex-col items-center">
								<rich-text :nodes="content" ></rich-text>
						</scroll-view>
					
					
				    <view class="flex-row items-center bottom justify-center">
				      <image
						v-if="!checked"
						@click="changAgree"
				        class="image_check"
				        src="https://terminator.axu9.com/images/uncheck.png"
				      />
					  <image 
						v-else
						@click="changAgree"
					    class="image_check"
					    src="https://terminator.axu9.com/images/checked.png"
					  />
				      <text class="ml-6 text_agree">已知并同意{{title}}</text>
				    </view>
				    <view class="flex-row bottom-btn">
				      <view @click="noAgree" class="flex-col justify-start items-center agree-btn"><text class="font-noagree">不同意</text></view>
				      <view @click="Agree" class="ml-14 flex-col justify-start items-center noagree-btn">
				        <text class="font-agree">同意并继续</text>
				      </view>
				    </view>
				  </view>
				</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getAgreement
	} from "@/api/video.js"
	export default {
		data() {
			return {
				showPop: false,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				title: '',
				agreement: '',
				content: ``,
				checked: false,
			}
		},
		created() {
			this.getAgree()
		},
		methods: {
			// 协议获取
			getAgree(){
				getAgreement({
					id: 2
				}).then(res => {
					console.log(res,'协议获取')
					this.title = res.data.title;
					this.agreement = res.data.description;
					// this.content = res.data.content;
					this.content = res.data.content.replace(/\<p/gi, '<p style="color: #fff"');
				}).catch(err => {
					
				})
			},
			open(){
				this.showPop = true
			},
			close(){
				this.showPop = false
			},
			changAgree(){
				this.checked = !this.checked;
			},
			noAgree(){
				// uni.navigateBack({
				// 	delta: 1
				// })
				this.$emit('noagree')
				uni.setStorageSync('isAgree',false);
			},
			Agree(){
				if(!this.checked){
					uni.showToast({
						title: '请勾选阅读同意协议',
						icon: 'none'
					})
					return
				}
				this.showPop = false;
				uni.setStorageSync('isAgree',true);
			},
			
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	@import url(../../static/css/common.css);
	.popup {
	  // margin-right: 40rpx;
	  padding: 59rpx 28rpx 30rpx;
	  border-radius: 32rpx;
	  background-image: url('https://terminator.axu9.com/images/video-pop-bg.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 615rpx;
	}
	.title {
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	  font-weight: 500;
	  color: #ffffff;
	}
	.popup-content {
		height: 400rpx;
		// overflow: auto;
	}
	.popup-content::-webkit-scrollbar{
		display: none;
	}
	.content {
	  margin-left: 6rpx;
	  color: #ffffff;
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 54rpx;
	  text-align: center;
	  height: 270rpx;
	  overflow-y: scroll;
	}
	.bottom {
	  margin-top: 26rpx;
	}
	.text_agree {
	  color: #ffffff;
	  font-size: 22rpx;
	  font-family: PingFang SC;
	  line-height: 22rpx;
	}
	.bottom-btn {
	  margin-top: 35rpx;
	}
	.agree-btn {
	  padding: 34rpx 0;
	  flex: 1 1 257rpx;
	  border-radius: 16rpx;
	  height: 102rpx;
	  border-left: solid 2rpx #00e586;
	  border-right: solid 2rpx #00e586;
	  border-top: solid 2rpx #00e586;
	  border-bottom: solid 2rpx #00e586;
	}
	.font-noagree {
		color: #00e586;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	.font-agree {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	
	.noagree-btn {
	  margin-right: 5rpx;
	  padding: 34rpx 0;
	  flex: 1 1 257rpx;
	  background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
	  border-radius: 16rpx;
	  height: 100rpx;
	}
	/* .text_6 {
	  color: #ffffff;
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	} */
	.vide{
		width: 100%;
		margin-bottom: 28rpx;
		box-sizing: border-box;
	}
	.ml-7-5 {
	  margin-left: 15rpx;
	}
	.mt-16-5 {
	  margin-top: 33rpx;
	}
	.image_check {
	  width: 30rpx;
	  height: 30rpx;
	}
</style>
